import { Component, Prop, Watch } from 'vue-facing-decorator'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from 'ant-design-vue/es/_util/type'
import { getReceiptList } from '@/api/customer'
import type { ReceiptDto } from '@/api/customer/types'
import { Button, message } from 'ant-design-vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import { h } from 'vue'
import DialogAddAccount from './DialogAddAccount'
import { removeReceiptInfo } from '@/api/system'
import type { AddType } from '@/api/types'

@Component
export class Receipt extends TableRender {
    @Prop() activeId!: number

    showAdd = false

    addType = 'add' as AddType

    curItem = {} as ReceiptDto

    @Watch('activeId')
    handleActiveId() {
        this.reloadPage(1)
    }

    get channelName() {
        return this.tableData?.[0]?.channelName ?? ''
    }

    tableColumnConfigOld = () =>
        [
            {
                field: 'bankName',
                title: '收款账户名称',
            },
            {
                field: 'bankNameAbbreviation',
                title: '账户简称',
            },
            {
                field: 'openBank',
                title: '开户行',
            },
            {
                field: 'bankNo',
                title: '银行卡号',
            },
            {
                field: 'wechatMchId',
                title: '微信商户号',
            },
            {
                title: '操作',
                fixed: 'right',
                width: 150,
                params: {
                    buttons: [
                        {
                            text: '删除',
                            type: 'danger',
                            event: (row: ReceiptDto) => this.onRemove(row)
                        },
                        {
                            text: '编辑',
                            type: 'primary',
                            event: (row: ReceiptDto) => this.onHandleShowAdd('edit', row)
                        }
                    ]
                },
                slots: {
                    default: 'buttons'
                }
            },
            
        ] as TableRenderColumnTypes<ReceiptDto>


    onHandleShowAdd(type: AddType, data?: ReceiptDto) {
        this.showAdd = true
        this.addType = type
        data && (this.curItem = data)
    }

    async onRemove(data: ReceiptDto) {
        await removeReceiptInfo(data.id)
        message.success('删除成功')
        this.reloadPage()
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.activeId) return []
        return getReceiptList({
            channelId: this.activeId,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    renderToolbar() {
        return <div class="flex justify-between px-20px pt-20px">
            <div class="font-bold text-lg">{this.channelName}收款账户</div>
            <Button type="primary" icon={h(PlusOutlined)} onClick={() => this.onHandleShowAdd('add')}>创建账户</Button>
        </div>
    }

    render() {
        return <div class="overflow-hidden">
            {this.renderToolbar()}
            {super.renderTable()}
            <DialogAddAccount v-model:show={this.showAdd} channelId={this.activeId} type={this.addType} itemData={this.curItem} onRefresh={this.reloadPage}/>
        </div>
    }
}

export default toNative<{activeId: number}, {}>(Receipt)
